<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-12 15:25:21
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-12 17:00:10
-->
<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <!-- 这行代码用于设置视窗的宽度和缩放比例，确保网页在不同设备上显示正确 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document - 练习</title>
    </head>
    <body>
        <script type="importmap">
        {
            "imports": {
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
        }
    </script>
        <div id="app">
            <h1>Hello World {{ name }}</h1>
            <button type="button" @click="changeName">Change Name</button>
        </div>
        <!-- 仅 safari 16.4+、chrome 89+、edge 89+、firefox 108+、opera 76+、
        chrome for android 131+、safari on ios 16.4+、opera mobile 80+、
        UC Browser for android 15.5+、android browser 131+、Firefox for android 132+、
        baidu browser 13.52+ 支持 importmap -->
        <script type="module">
            import { ref, createApp } from 'vue'
            const name = ref('AliYun')

            const changeName = () => {
                name.value = getRandomName()
                console.log(Date.now().toString().slice(-3), name.value)
            }

            const getRandomName = () => {
                const names = ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank']
                return names[Math.floor(Math.random() * names.length)]
            }

            const app = createApp({
                setup() {
                    return {
                        name,
                        changeName,
                    }
                },
            })
            app.mount('#app')
        </script>
    </body>
</html>